<template>
  <view class="container">
    <custom-header
      :isHomepage="false"
    ></custom-header>

    
    <!-- Page Title -->
    <text class="page-title">文章修改</text>

    <view class="main-content">

      <view class="article-modification-form">

         <!-- 文章标题 -->
         <view class="form-item">
            <text class="form-label">文章标题:</text>
            <view class="input-wrapper">
               <input class="form-input" type="text" v-model="title" placeholder="" />
            </view>
         </view>

         <!-- 文章内容 -->
          <view class="form-item">
            <text class="form-label">文章内容:</text>
            <view class="textarea-wrapper">
               <textarea class="form-textarea" auto-height placeholder="" v-model="textarea" value=""></textarea>
            </view>
         </view>

          


         <button class="modify-article-button" @click="handleModifyArticle">修改文章</button>
         <button class="return-button" @click="handleReturn">返回上一页</button>

      </view>

    </view>

    <Footer></Footer>

  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
import Footer from '@/components/footer/index.vue'; // Adjust path as needed
import { apiMuInfoArticle, apiMuEditArticle } from '@/api/article'


const articleId = ref()
const memorialId = ref()
const textarea = ref('')
const title = ref('')
const detailInfo = ref({})
const type = ref('add')

const getetailData = () => {
    apiMuInfoArticle({id: articleId.value}).then((res) => {
        console.log(res);
		if(res.code == 1){
			textarea.value = res.data.content
			title.value = res.data.title
			detailInfo.value = res.data
		}
    });
}


// 修改文章
const handleModifyArticle = () => {
	console.log('2222222222222222222')
    if(title.value == ''){
		uni.showToast({
			title: '请填写标题',
			icon: 'none',
			duration: 2000
		})
		return false
	}
	if(textarea.value == ''){
		uni.showToast({
			title: '请填写文章内容',
			icon: 'none',
			duration: 2000
		})
		return false
	}
	
	let ruleForm = {
		title: title.value,
		content: textarea.value,
		mu_id: memorialId.value
	}
	if(type.value == 'add'){
		apiMuAddArticle(ruleForm).then((res) => {
			console.log(res)
			handleReturn()
		})
	}else if(type.value == 'edit'){
		ruleForm.id = Number(articleId.value)
		apiMuEditArticle(ruleForm).then((res) => {
			console.log(res)
			handleReturn()
		})
	}
};
// 返回
const handleReturn = () => {
	const pages = getCurrentPages(); // 获取页面栈
	console.log('pages============================',pages)
	  // pages.length - 1 是当前页, pages.length - 2 是上一页
	  if (pages.length >= 2) {
	    const prevPage = pages[pages.length - 2];
	    
	    // 调用上一页暴露出来的方法
	    // H5 和 App-Vue 里, 实例在 prevPage.$vm 上
	    // 小程序里, 实例在 prevPage 上
	    // 为了兼容，可以这样写
	    const prevPageInstance = prevPage.$vm || prevPage;
	    
	    if (prevPageInstance && typeof prevPageInstance.setDataFromB === 'function') {
	      prevPageInstance.setDataFromB({ msg: '我直接调用了你的函数' });
	    }
	}
    uni.navigateBack({
		delta: 1
	}); 
};

onLoad( async (options) => {
	articleId.value = options.articleId
	type.value = options.type
	memorialId.value = options.id
	await getetailData()
})
</script>

<style scoped>
/* Scoped styles for this page */
/* Reusing common styles from previous pages */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5; /* Match background color */
   padding-bottom: 40rpx; /* Add some padding at the bottom */
   box-sizing: border-box; /* Include padding in height calculation */
}



/* Page Title */
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 40rpx; /* Space below banner */
  margin-bottom: 30rpx; /* Space above main content card */
  color: #333;
}

/* Main Content Area (White Card) */
.main-content {
  background-color: #fff; /* White background */
  margin: 0 20rpx; /* Side margins */
  padding: 30rpx; /* Inner padding */
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); /* Subtle shadow */
  display: flex;
  flex-direction: column;
  /* No align-items: center here, form is left-aligned within card */
}

/* Article Modification Form Styles - Reusing and adapting input styles */
.article-modification-form {
    width: 100%; /* Take full width within the card */
    /* No bottom margin needed, buttons/links will have spacing */
}

.form-item {
  margin-bottom: 30rpx;
  position: relative; /* Needed for absolute positioning of hints if any */
}
.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1rpx solid #ddd;
  border-radius: 5rpx;
  padding: 0 20rpx; /* Add padding inside the input container */
  height: 80rpx; /* Fixed height for inputs */
}
.form-input {
  flex: 1; /* Allow input to take available space */
  height: 100%; /* Fill parent height */
  font-size: 28rpx;
  color: #333;
  /* Remove default input padding/appearance if any */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0; /* Ensure no extra padding */
   background-color: transparent; /* Ensure background is transparent for wrapper border */
}
/* Placeholder style */
.form-input::placeholder {
  color: #ccc;
}

/* Textarea Styles */
.textarea-wrapper {
    border: 1rpx solid #ddd;
    border-radius: 5rpx;
    padding: 20rpx; /* Padding inside the textarea wrapper */
     /* Min-height might be needed, or rely on auto-height */
}
.form-textarea {
    width: 100%; /* Take full width minus padding */
    font-size: 28rpx;
    color: #333;
    /* Uniapp textarea has default padding/margin, might need override */
     padding: 0; /* Remove default padding */
     margin: 0; /* Remove default margin */
     box-sizing: border-box; /* Include padding/border in width/height */
     background-color: transparent;
     line-height: 1.5; /* Improve readability */
}

/* Display Item Styles (for 发布时间) */
.display-item {
    display: flex;
    /* No border or wrapper around the value */
     align-items: center; /* Align label and value vertically */
}
.display-value {
    font-size: 28rpx;
    color: #333; /* Match other text color */
}


/* Action Button Styles */
.modify-article-button {
    /* Orange button style - same as Submit button on register */
    width: 100%; /* Take full width */
    height: 90rpx; /* Button height */
    line-height: 90rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #ff9800; /* Orange color */
    border: none;
    border-radius: 8rpx;
    text-align: center;
    margin-top: 40rpx; /* Space above button */
     margin-bottom: 20rpx; /* Space below button */
     display: flex;
     align-items: center;
     justify-content: center;
}

.return-button {
    /* Gray button style - same as cancel button on settings page */
     width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #333; /* Dark gray text */
    background-color: #e0e0e0; /* Light gray background */
    border: 1rpx solid #ccc; /* Subtle border */
    border-radius: 8rpx;
    text-align: center;
     margin-bottom: 0; /* No bottom margin before QR codes */
      display: flex;
     align-items: center;
     justify-content: center;
}
</style>